<script setup lang="ts">
import type { PropType } from 'vue'
import type { VxeTableEvents, VxeTablePropTypes } from 'vxe-table'
import type { IMethods, ITableDataSet } from '@/types'
import { inject, onBeforeMount, ref } from 'vue'
import toolbar from '@/components/toolbar/index.vue'
import vxeColGroup from './components/vxeColGroup.vue'
import vxeColItem from './components/vxeColItem.vue'

const props = defineProps({
  mainData: {
    type: Object as PropType<ITableDataSet>,
    default: () => ({}),
  },
  treeConfig: Object,
  keepSource: {
    type: Boolean,
    default: true,
  },
  tableConfig: Object,
  remark: {
    type: Number,
    default: 0,
  },
})
/**
 * 表格配置项 部分可能需要迁移到prop可配置
 */
const scrrollX = ref(true) // 横向虚拟滚动
const scrrollY = ref(true) // 纵向虚拟滚
const sortConfig = ref<VxeTablePropTypes.SortConfig>({
  remote: true,
})
const methods = inject<IMethods>('methods')
const sortChangeEvent: VxeTableEvents.SortChange = ({ field, order }) => {
  const sort = order ? `${field} ${order?.toLocaleUpperCase()}` : null
  if (methods && methods.search)
    methods.search(props.remark, { sort })
  else console.error('查询方法没成功注入')
}

// interface RowVO
const tableRef = ref(null)
onBeforeMount(() => {

})
/**
 * @description: 表单编辑前回调
 * @param :{ row, rowIndex, column, columnIndex }
 */
function beforeEditMethod() {
  return true
}
</script>

<template>
  <div class="container flex-col-start">
    <div class="flex-1">
      <vxe-table
        :id="`vxeTable${mainData.ID}`" ref="tableRef" height="100%" :auto-resize="true"
        :data="mainData.tableDatas" :loading="mainData.loading" show-overflow="tooltip" :keep-source="keepSource"
        :border="true"
        :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false, autoClear: false, beforeEditMethod }"
        :custom-config="{ storage: true }" :row-config="{ isCurrent: true, isHover: true }"
        :column-config="{ resizable: true }" :scroll-x="{ enabled: scrrollX, gt: 20, scrollToLeftOnChange: true }"
        :scroll-y="{ enabled: scrrollY, gt: 20, scrollToTopOnChange: true }" :sort-config="sortConfig"
        @sort-change="sortChangeEvent"
      >
        <vxe-column type="seq" width="60" />
        <template v-for="(colItem, colIndex) in mainData.tableColumns">
          <template v-if="Number(colItem.width) && colItem.visible">
            <template v-if="colItem && colItem.children && colItem.children.length">
              <vxeColGroup :key="colIndex" :col-item="colItem" :col-index="colIndex" :title="colItem.label" />
            </template>
            <template v-else>
              <vxeColItem :key="colIndex" :col-item="colItem" :col-index="colIndex" />
            </template>
          </template>
        </template>
      </vxe-table>
    </div>
    <toolbar :main-data="mainData" :remark="remark" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}

.footer {
  width: 100%;
  // height: 50px;
  padding: 2px 0 0 0;
}
:deep(.vxe-table){
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.vxe-button.type--button) {
  height: 30px !important;
}

:deep(.vxe-button.type--button.is--circle) {
  min-width: 30px !important;
}

:deep(.vxe-toolbar .vxe-custom--option-wrapper) {
  bottom: 0;
  left: 50px;
  right: auto;
}

//表位行高
:deep(.vxe-footer--row) {
  height: 35px;
}

//表头底色
:deep(.vxe-header--row) {
  background-color: #f3f3f3;
}

//表头底部线
:deep(.vxe-table--header-border-line) {
  border-bottom: 1px solid #b9b9b9 !important;
}

//列表边框线宽度和颜色
:deep(.vxe-table--render-default.border--full .vxe-body--column) {
  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
  // background-size: 2px 100%, 100% 2px;
}

//列表表头表尾线宽度和颜色
:deep(.vxe-table--render-default.border--full .vxe-header--column,
  .vxe-table--render-default.border--full .vxe-footer--column) {
  background-image: linear-gradient(#b9b9b9, #b9b9b9),
    linear-gradient(#b9b9b9, #b9b9b9);
  // background-size: 2px 100%, 100% 2px;
}

//外边框线
.el-select {
  width: 100%;
}

.filter-tooltip {
  padding: 5px 10px 0 10px;
  text-wrap: wrap;
  max-width: 170px;
}
</style>
